<template>
  <div>
    <nav-header :headerTitle="'产品介绍'" :navBgColor="'#fff'"></nav-header>
    <section class="page">
      <div class="p-header">
        <img src="@/assets/images/aboutUs/backdrop@2x.png" alt />
        <span>拓展人脉资源</span>
        <p>开启财富之路</p>
      </div>
      <div class="null84"></div>
      <div class="p-title">拓展人脉资源</div>
      <div class="null32"></div>
      <div class="p-text">BWRM首创社交广告系统，覆盖上亿优质用户。多维度精准定位目标人群，助力创客实现人脉倍增。朋友圈微信群广告多重推广能力，助您低成本获得人脉。</div>
       
      <div class="null64"></div>
      <div class="p-title">董事长语：</div>
      <div class="null32"></div>
      <div class="p-footer">
        <div>人脉即财脉，BWRM，助您获取无限人脉。你还担心事业不能成功吗？</div>
        <img class="pf-imgone" src="@/assets/images/aboutUs/produce_left@2x.png" alt />
        <img class="pf-imgtwo" src="@/assets/images/aboutUs/produce_right@2x.png" alt />
        <img class="pf-imgthree" src="@/assets/images/aboutUs/produce_san.png" alt />
      </div>
      <div class="null84"></div>
    </section>
  </div>
</template>

<script>
import navHeader from "@/components/NavHeader";
import mixin from "@/utils/mixin";
export default {
  name: "Introduction",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      show: {}
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init: function() {}
  }
};
</script>
<style lang="scss" scoped>
.page {
  margin-top: 86px;
  .null32 {
    width: 100%;
    height: 32px;
  }
  .null64 {
    width: 100%;
    height: 84px;
  }
  .null84 {
    width: 100%;
    height: 84px;
  }
  .p-header {
    width: 100%;
    height: 324px;
    position: relative;
    font-family: PingFangSC-Regular;
    font-size: 64px;
    color: #ffffff;
    letter-spacing: 20px;
    text-shadow: 2px 2px 1px #fdd148;
    text-align: left;
    img {
      width: 100%;
      height: 100%;
    }
    span {
      position: absolute;
      left: 123px;
      top: 58px;
    }
    p {
      position: absolute;
      left: 123px;
      top: 146px;
    }
  }
  .p-title {
    width: 100%;
    text-align: center;
    font-family: PingFangSC-Medium;
    font-size: 48px;
    color: #303133;
    letter-spacing: 2.4px;
    background: linear-gradient(
      180deg,
      rgba(255, 37, 37, 1) 0%,
      rgba(254, 145, 64, 1) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
  }
  .p-text {
    width: 686px;
    margin: auto;
    font-family: PingFangSC-Regular;
    font-size: 30px;
    color: #303133;
    letter-spacing: 0;
    line-height: 48px;
  }
  .p-items {
    width: 686px;
    margin: auto;
    height: 96px;
    position: relative;
    img {
      width: 52px;
      height: 52px;
      position: absolute;
      left: 0px;
      top: 50%;
      margin-top: -26px;
    }
    span {
      font-family: PingFangSC-Regular;
      font-size: 30px;
      color: #303133;
      letter-spacing: 0;
      line-height: 48px;
      position: absolute;
      left: 76px;
      top: 0px;
      height: 96px;
    }
    .line {
      width: 2px;
      height: 56px;
      opacity: 0.14;
      background: #ff2525;
      position: absolute;
      left: 24px;
      top: 82px;
    }
  }
  .p-footer {
    box-sizing: border-box;
    width: 686px;
    margin: auto;
    border: 2px solid #fe412c;
    border-radius: 8px;
    padding: 100px 64px 100px 64px;
    position: relative;
    text-align: left;
    div {
      font-family: PingFangSC-Semibold;
      font-size: 32px;
      color: #303133;
      letter-spacing: 0;
      line-height: 48px;
      font-weight: bold;
    }
    .pf-imgone{
        width: 36px;
        height: 34px;
        position: absolute;
        left: 28px;
        top: 48px;
    }
    .pf-imgtwo{
         width: 36px;
        height: 34px;
        position: absolute;
        right: 28px;
        bottom: 48px;
        
    }
    .pf-imgthree{
        width: 22px;
        height: 19px;
        position: absolute;
        top: -19px;
        left: 50%;
        margin-left: -11px;
        z-index: 200;
    }
  }
}
</style>
